<!--
 * @Description: 审批详情
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-04-30
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-05-15
-->

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { computed, onMounted, reactive, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import { requestCompanyCertificationApprove, requestCompanyCertificationDetail, requestGetCompanyCertificationApprovalProcess } from '/@/api/business/datamarket/companyCertification'
  import { ApprovalProcessStatusDesc, ApprovalProcessStatusEnum, ApproveStatusDesc, ApproveStatusEnum, StatusDesc, StatusEnum } from '/@/api/business/datamarket/companyCertification/enum'
  import Back from '/@/components/Back.vue'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { formatToDateTime } from '/@/utils/date'

  const route = useRoute(),
    router = useRouter()

  const queryId = route.query.id as any as number

  /** 审批详情 */
  const approveDetail = ref({} as CompanyCertificationDetailTypes.IResponse)
  /** 审批流程 */
  const approveProcess = ref([] as GetCompanyCertificationApprovalProcessTypes.IResponse[])

  onMounted(() => {
    initApproveDetail()
    initApproveProcess()
  })

  /**
   * 初始化审批详情
   */
  const initApproveDetail = async () => {
    const { responseData } = await requestCompanyCertificationDetail({ id: queryId })
    approveDetail.value = responseData
  }

  /**
   * 初始化审批流程
   */
  const initApproveProcess = async () => {
    const { responseData } = await requestGetCompanyCertificationApprovalProcess({ id: queryId })
    approveProcess.value = responseData
  }

  /**
   * 审批：同意/拒绝
   * @param status 审批状态
   */
  const approve = async (status: ApproveStatusEnum) => {
    modal.visible = true
    modal.status = status
  }

  /** 审批弹窗 */
  const modal = reactive({
    visible: false,
    status: ApproveStatusEnum.APPROVED,
    content: '',
    onOk: async () => {
      modal.visible = false
      const { responseCode } = await requestCompanyCertificationApprove({ id: queryId, status: modal.status, approveRemark: modal.content })
      if (responseCode === HttpCodeEnum.SUCCESS) {
        message.success('审批成功')
        router.back()
      }
    },
  })

  /** 审批流程-描述 */
  const description = computed(() => {
    return (item: GetCompanyCertificationApprovalProcessTypes.IResponse) => {
      if (item.status === ApprovalProcessStatusEnum.PENDING) return item.companyName
      if (item.status === ApprovalProcessStatusEnum.APPROVED) return item.approveRemark
      if (item.status === ApprovalProcessStatusEnum.REJECTED) return item.approveRemark
      if (item.status === ApprovalProcessStatusEnum.SUBMIT_AGAIN) return item.companyName
      return ''
    }
  })
</script>

<template>
  <div class="detail">
    <Back title="审批详情" />
    <div class="head">
      <div class="head-title">{{ approveDetail?.companyName }}提交的认证审批</div>
      <div class="head-subtitle">申请人：{{ approveDetail?.applyUserName ?? '--' }}</div>
    </div>
    <div class="content">
      <div class="info">
        <div class="info-title">详细信息</div>
        <div class="info-item">
          <label class="info-item-label">企业名称</label>
          <span class="info-item-value">{{ approveDetail?.companyName }}</span>
        </div>
        <div class="info-item">
          <label class="info-item-label">审批状态</label>
          <span class="info-item-value">{{ StatusDesc[approveDetail?.status] }}</span>
        </div>
        <div class="info-item">
          <label class="info-item-label">信用代码</label>
          <span class="info-item-value">{{ approveDetail?.creditCode }}</span>
        </div>
        <div class="info-item">
          <label class="info-item-label">公司地址</label>
          <span class="info-item-value">{{ approveDetail?.address }}</span>
        </div>
        <div class="info-item">
          <label class="info-item-label">公司简介</label>
          <span class="info-item-value">{{ approveDetail?.companyProfile }}</span>
        </div>
        <div class="info-item">
          <label class="info-item-label">营业执照</label>
          <img class="info-item-value img" :src="approveDetail?.licenseUrl" />
        </div>
        <div class="info-item">
          <label class="info-item-label">联系人</label>
          <span class="info-item-value">{{ approveDetail?.contactPerson }} </span>
        </div>
        <div class="info-item">
          <label class="info-item-label">联系方式</label>
          <span class="info-item-value"> {{ approveDetail?.contactPhone }}</span>
        </div>
        <div class="info-button" v-if="approveDetail?.status === StatusEnum.PENDING">
          <a-button type="primary" @click="approve(ApproveStatusEnum.APPROVED)">同意</a-button>
          <a-button danger @click="approve(ApproveStatusEnum.REJECTED)">拒绝</a-button>
        </div>
      </div>
      <div class="process">
        <div class="process-title">审批流程</div>
        <div class="process-step">
          <template v-if="approveProcess?.length > 0">
            <a-steps progress-dot :current="approveProcess?.length - 1" direction="vertical">
              <a-step v-for="(item, i) in approveProcess" :key="`process-step-item${i}`" :title="ApprovalProcessStatusDesc[item.status]" :sub-title="formatToDateTime(item.createdTime)" :description="description(item)" />
            </a-steps>
          </template>
          <div v-else>暂无</div>
        </div>
      </div>
    </div>
    <div class="modal">
      <a-modal v-model:visible="modal.visible" :title="`审批${ApproveStatusDesc[modal.status]}`" @ok="modal.onOk">
        <a-textarea v-model:value="modal.content" :rows="5" placeholder="请输入审批意见" />
      </a-modal>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .detail {
    min-height: 100%;
    padding-bottom: 32px;
    background: #fff;

    .head {
      padding: 24px 48px;

      .head-title {
        font-size: 20px;
        font-weight: 600;
        color: #000;
      }

      .head-subtitle {
        margin-top: 24px;
        font-size: 16px;
      }
    }

    .content {
      display: flex;
      margin-top: 24px;
      padding-left: 48px;

      .info {
        width: 500px;

        .info-title {
          font-size: 16px;
          color: #000;

          &::before {
            content: '';
            width: 3px;
            height: 13px;
            display: inline-block;
            background: #13c2c2;
            margin-right: 6px;
          }
        }

        .info-item {
          display: flex;
          margin-top: 24px;
          padding-left: 24px;

          .info-item-label {
            color: #666;
          }

          .info-item-value {
            margin-left: 24px;
            color: #000;

            &.img {
              width: 200px;
            }
          }
        }

        .info-button {
          display: flex;
          width: 140px;
          margin: 48px 0 0 24px;
          justify-content: space-between;
          align-items: center;
        }
      }

      .process {
        .process-title {
          font-size: 16px;
          color: #000;

          &::before {
            content: '';
            width: 3px;
            height: 13px;
            display: inline-block;
            background: #13c2c2;
            margin-right: 6px;
          }
        }

        .process-step {
          margin-top: 18px;

          :deep(.ant-steps-item-content) {
            padding-bottom: 24px;
          }
        }
      }
    }
  }
</style>
